<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>登录-MCAKE</title>
    <!-- <link rel="stylesheet" href="./css/login.css">  -->
    <!-- <link rel="stylesheet" href="../../css/login.css">  -->
    <!-- <link rel="stylesheet" href="./css/bootstrap.css"> -->
    <!-- <link rel="stylesheet" href="../../css/bootstrap.css"> -->
    <link rel="stylesheet" href="bootstrap.css">
    <!-- <link rel="stylesheet" href="./js/bootstrap.js"> -->
    <!-- <link rel="stylesheet" href="../../js/bootstrap.js"> -->
    <script src="./js/jquery.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="login.css"> 
    <!-- <link rel="stylesheet" href="./css/nav.css"> -->
    <!-- <link rel="stylesheet" href="../../css/nav.css"> -->
    <link rel="stylesheet" href="nav.css">
    <link rel="stylesheet" href="footer.css">
</head>
<body>  
        <div class="navigation-bar">
                <div class="logo-box">
                    <img src="logo.png" alt="">
                </div>
               <div class="navigation-bar-top">
                   
                  <div class="wallbox-wallcenter">
                       <!-- /* 这是购物车那一栏 */ -->
                      <div class="wallbox-walltop">
   
                          <div class="shopping-box">
                               <!-- 购物车盒子 -->
                                  <ul>
                                      <li><a href="">
                                          <img src="shopping.png" alt="" class="gowuche">
                                          购物车
                                       </a></li>
                                      <li><a href="#">登录</a></li>
                                      <li><a href="cake-reg.html">注册</a></li>
                                  </ul>
                            

                          </div>
                      </div>
                      <div class="wallbox-wallbottom">
                       <!-- 四个导航栏模块  -->
                          <div class="navigation-bar-bottom">
                             <ul>
                                 <li class="underline"><a href="CAKE.html">Nos Produits<br>
                                               <span> 全部产品</span>
                                               </a>  
                                               </li>
                                 <li class="border1">
                                     <a href="./otherHTML/napoleon.html">Napoléon<br>
                                 <span>拿破仑系列</span> 
                                    </a>
                                </li>
                                 <li class="border2">
                                    <a href="">Événements<br>
                                 <span>热门活动</span> 
                                   </a>
                               </li>
                                 <li>
                                       <a id="vip_center" href="./otherHTML/monmcake.html">Mon M'CAKE<br>
                                    <span>会员中心</span>  
                                      </a>
                               </li>
                             </ul>
                             <div class="phone">
                                <div class="phone-box">
                                    <div> 
                                        <img src="电话.png" alt=""> 
                                        <span><a href="#">4006-123-099</a> </span>
                                    </div>
                                    <div>
                                           <img src="laba.png" alt=""> 
                                           <span class="pei"><a href="#">配送范围查询</a></span>
                                 </div>
                                </div>
                                <!-- 地标 -->
                              <div class="sites">
                                   <ul class="site">
                                       <li>
                                       <img src="地址.png" alt="">
                                           <a href="">上海市 </a>  
                                       </li>
                                   </ul>                               
                               </div>            
                             </div>
                          </div>                
                      </div>
                  </div>        
               </div>
            </div>
       </div>
   </div> 
</div>


<!-- 登录主体区域 -->
<div class="banner-bg">
    <table></table>

<div class="login">
 <div class="login-box"> 
   <ul>
       <li><h1 class="h1-login">登录</h1></li>
       <li><p class="zhanghao-login">账号密码登录</p></li>

       <li>
         <input type="text" id="uname" placeholder="请输入用户名"  data-value="uname"> 
         <span class="disnone">请输入3~6位用户名</span>
      </li>

       <li> 
     <input type="text" id="upwd" placeholder="请输入密码"   data-value="upwd">
     <span class="disnone">请输入6~12位密码</span>
       </li>

       <li class="wangji"> 
           <a href="#">忘记密码</a>
       </li>
       <li>
            <button type="button" class="btn btn-info" onclick="login()">点击登录</button>
      </li>
   </ul>     
</div>
<div class="others-login">
  <h5>其他登录方式</h5>
  <div>
    <span onclick="authorize('alipay');" class="zfb on"></span>
    <span onclick="authorize('weibo');" class="wb"></span>
  </div>
  <p class="have-id">还没有账号?</p>
  <div>  <button id="reger" class="btn btn-danger ">立即注册</button> </div>
</div>


</div>
</div>

<script>
  function login(){
	 //1.dom获取数据
	 var $uname=document.getElementById(uname).value;
	 var $upwd=document.getElementById(upwd).value;
//判断是否为空
   if(!$uname || $uname==""){
		 alert("用户名为空");return;
		}
	 if(!$upwd || $upwd==""){
		 alert("用户密码为空");return;
		}
//xhr四部曲
 //1.创建异步对象
  var xhr=new XMLHttpRequest();
 //4.接受响应数据
   xhr.onreadystatechange=function(){
	  if(xhr.readyState==4 && xhr.status==200){
		 var result=xhr.responseText;
		  if(result=="1"){
			 alert("登录成功");
       location.href=("http://127.0.0.1:8080/otherHTML/monmcake.html");
			 return;
			}else {
			 alert("登录失败")
			}
		}
	 }
 //2.创建请求
  xhr.open("get","/pro/v1/login/"+$uname+"&"+$upwd,true);
 //3.发送请求
 xhr.send();
 }


(function(){
//dom4步
//1.查找触发事件的元素
var txtName=document.querySelector("[data-value=uname]");
var txtPwd=document.querySelector("[data-value=upwd]");
//2.绑定事件函数
 //事件：当获得焦点时让placeholder="" ，并且旁边的span提示输入格式文子; 
  txtPwd.onfocus=
  txtName.onfocus=function(){
    this.placeholder="";
    //查找旁边的span 
    var span=this.parentNode.children[1];
     span.className="";
  }
  //当失去焦点时，绑定事件处理函数，判断是否正确
  txtName.onblur=function(){
  this.placeholder="请输入用户名";
 var reg=/^([\u4e00-\u9fa5]|\w){3,6}$/;
 //查找旁边的span
 vail(this,reg);
 }
 txtPwd.onblur=function(){
 this.placeholder="请输入密码";
 var reg=/^\w{3,6}$/;
 //查找旁边的span
 vail(this,reg);
 } 
 function vail(data,reg){
//  var bool=reg.test(data.value);
 //查找旁边的span
 var span=data.parentNode.children[1];
if(reg.test(data.value)){//验证通过
  span.className="vail_success"; 
  span.innerHTML="格式正确";
}else{
 span.className="vail_fail";
 span.innerHTML="输入格式有误";
}
 }
})()


//  function unamedrop(){
//      uname.placeholder="请输入用户名";
//    if(uname.value==""){
// 					uname_span.innerHTML="用户名不能为空";
// 				}else if(uname.value.length<2 || uname.value.length>6){
//                         uname_span.innerHTML="格式错误";
// 				}else{
// 					uname_span.innerHTML="正确";
// 				}
// 			}      
// function unameget(){
//   uname_span.innerHTML="请输入3~6位用户名";
//   uname.placeholder="";
// }

// function upwddrop(){
//     upwd.placeholder="请输入密码";
//    if( upwd.value==""){
//         upwd_span.innerHTML="用户密码不能为空";
// 				}else if( upwd.value.length<6 ||  upwd.value.length>12){
//                         upwd_span.innerHTML="格式错误";
// 				}else{
//                     upwd_span.innerHTML="正确";
// 				}
// 			}      
// function upwdget(){
//   upwd_span.innerHTML="请输入6~12位密码";
//   upwd.placeholder="";
// }



	
</script>

<!-- footer部分 -->
<div class="footer">
    <div class="footer-wallbox">
      <div class="m_copy">
        <p class="icp_no">客服热线：4006-678-678（8:00 - 22:00）</p>
        <p>客服邮箱：cs@mcake.com</p>
      </div>
      <div class="foot_nav">
         <div class="discover">
           <h4 class="discover-ico">发现</h4>
           <p>公告</p>
           <p class="wb-wb"></p>
           <p class="wx-wx"></p>
         </div>
         <dl class="footer-dl">
           <dt>关于我们</dt>
           <dd>企业介绍</dd>
           <dd>媒体合作</dd>
           <dd>招贤纳士</dd>
           <dd>呼叫中心</dd>
         </dl>
         <dl class="footer-dl">
           <dt>帮助中心</dt>
           <dd>投诉与建议</dd>
           <dd>会员权益</dd>
           <dd>购物指南</dd>
           <dd>支付类</dd>
           <dd>订单相关</dd>
           <dd>配送服务</dd>
         </dl>
      </div>
  
    </div>
   
  
  </div>
  
  <div class="copyright">
     <div class="copy-right">
       <table>
         <tr>
           <td class="longleft">上海卡法电子商务有限公司</td>
           <td class="long">上海卡法电子商务有限公司北京分公司</td>
           <td>上海卡法电子商务有限公司杭州分公司</td>
         </tr>
         <tr>
           <td>地址：上海市普陀区同普路1130弄3号楼 </td>
           <td>地址：北京市朝阳区东四环中路82号3座04层505</td>
           <td>地址：杭州市拱墅区中环大厦607室</td>
         </tr>
         <tr>
           <td>电话：021-52691591</td>
           <td>电话：010-52088262</td>
           <td>电话：010-52088262</td>
         </tr>
         <tr>
           <td>社会信用代码：913101070678091460</td>
           <td>社会信用代码：913101070678091460</td>
           <td>社会信用代码：913101070678091460</td>
         </tr>
         <tr>
           <td>食品经营许可证：JY13101070034251</td>
           <td>食品经营许可证：JY13101070034251</td>
           <td>食品经营许可证：JY13101070034251</td>
         </tr>
         <tr>
           <td>食品生产许可证：SC12431010700121</td>
           <td></td>
           <td></td>
         </tr>
       </table>
     </div>
     <p class="last-copy">Copyright © 2012-2019 上海卡法电子商务有限公司 版权所有
      </p>
  </div>




    
</body>
</html>